import {useState} from 'react'
import {Link} from 'react-router-dom'

function Footer(props) {
  const [acive, setAcive] = useState(0)

  return (
    <div className="footer" style={{backgroundColor:'#fff'}}>
      <ul className="u-flex u-row-around u-border-top">
        <Link className="u-flex-col" onClick={() => changeAcive(0)} to="/"><img className="footerimg" src={acive === 0 ? require("../../assets/img/dianying1.png") : require("../../assets/img/dianying.png")} alt=""/>电影</Link>
        <Link className="u-flex-col" onClick={() => changeAcive(1)} to="/cinema"><img className="footerimg" src={acive === 1 ? require("../../assets/img/yingyuan1.png") : require("../../assets/img/yingyuan.png")} alt=""/>电影院</Link>
        <Link className="u-flex-col" onClick={() => changeAcive(2)} to="/my"><img className="footerimg" src={acive === 2 ? require("../../assets/img/wode1.png") : require("../../assets/img/wode.png")} alt=""/>我的</Link>
      </ul>
    </div>
  )

  function changeAcive(num) {
    setAcive(num)
  }
}

export default Footer